<!--我的短信：1.通过搜索条件  查询我发送的短信-->
<template>
  <div class="smsMy">
    <affix :label="$t('sms.mySmsSearch')"></affix>
    <!--搜索条件 start==================================-->
    <el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">
    <el-row>
      <div class="part">
        <span class="demonstration">{{$t('sms.timeScope')}}：</span>
        <el-date-picker size="mini" :id="['g1','g2']"
          class="date-choose"
          v-model="ruleForm.date"
          type="datetimerange"
          :editable="false"
          :picker-options="pickerOptions2"
          :placeholder="$t('sms.choTimeScope')"
          align="right">
        </el-date-picker>
      </div>
      <div class="part">
        <span class="demonstration">{{$t('sms.sendPhoneNum')}}：</span>
        <el-input size="mini" class="phone-num" v-model="ruleForm.num"></el-input>
      </div>
      <div class="part">
        <span class="demonstration">{{$t('sms.smsState')}}：</span>
        <el-select size="mini" class="status-choose" v-model="ruleForm.m7Status" :placeholder="$t('public.pleasePick')">
          <el-option
            :label="$t('public.all')"
            :value="''">
          </el-option>
          <el-option
          v-for="item in smsStatus"
          :label="smsSendingStatus === 'showAll' ? item.code_name : item.code_name_display"
          :value="item.code_value">
          </el-option>
        </el-select>
      </div>
      <div class="part">
        <span class="demonstration">{{$t('sms.smsSign')}}：</span>
        <el-select size="mini" class="sign-choose" v-model="ruleForm.sign" :placeholder="$t('public.pleasePick')">
          <el-option
            :label="$t('public.all')"
            :value="''">
          </el-option>
          <el-option
            class="sms-my-sign-select-option"
            v-for="item in smsSign"
            :label="item.name"
            :value="item.subcode">
          </el-option>
        </el-select>
      </div>
      <div class="submit">
        <el-button class="primary_btn report_excel_btn" @click.stop="resetForm">{{$t('public.reset')}}</el-button>
        <el-button type="primary" class="primary_btn" @click.stop="searchMySms">{{$t('public.search2')}}</el-button>
      </div>
    </el-row>
    </el-form>
    <!--搜索条件  end================================-->
    <affix :label="$t('sms.smsSearchList')"></affix>
    <div class="tables">
      <div class="caption">
        <span style="font-size:14px;">{{$t('sms.smsWXTS', {smsSplitBaseNum: smsSplitBaseNum})}}</span>
          <Pagination
            class="fr"
            :small="true"
            :currentPage="currentPage"
            :count="count"
            @turnPage="handleCurrentChange"
            :totalPage="Math.ceil(count/pageSize)"
          >
          </Pagination>
      </div>
      <!--表格===============================================-->
      <el-table :data="tableData" stripe style="width: 100%" v-loading="tableLoading" size="mini" border>
        <el-table-column prop="numHide" :label="$t('sms.sendPhoneNum')" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="numAttribution" :label="$t('sms.sendLocation')" show-overflow-tooltip :render-header="renderHeader">
        </el-table-column>
        <el-table-column prop="agentsData" :label="$t('sms.sendAgents')" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="submitTime" :label="$t('sms.sendTime')" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="receiveTime" :label="$t('sms.receiveTime')" show-overflow-tooltip v-if="smsSendingStatus === 'showAll'" :render-header="renderHeader">
        </el-table-column>
        <el-table-column prop="m7StatusName" :label="$t('sms.smsState')" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="splitCount" :label="$t('sms.splitNum')" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="signDisplay" :label="$t('sms.sign')" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="content" :label="$t('sms.content')" show-overflow-tooltip>
        </el-table-column>
        <el-table-column  :label="$t('sms.operate')" width="100">
          <template scope="scope">
            <el-button type="text" @click.stop="showSmsDetail(scope.$index, tableData)" size="small">{{$t('sms.searchToLook')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--表格==============================================================================-->
      <!--点击查看  dialog 短信详情    start  ===============================================-->
      <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll top="10%" :title="$t('sms.smsDetailInfo')" :visible.sync="dialogSmsDetailVisible" width="50%">
        <el-row style="margin-bottom: 10px;">
          <el-col :span="3"><div>{{$t('sms.sendPhoneNum')}}:</div></el-col>
          <el-col :span="6"><div class="location" >{{smsDetail.numHide}}<span :title="smsDetail.numAttribution" v-if="smsDetail.numAttribution" style="margin-left:3px;">({{smsDetail.numAttribution}})</span> </div></el-col>
          <el-col :span="3"><div>{{$t('sms.sendTime')}}:</div></el-col>
          <el-col :span="4"><div>{{smsDetail.submitTime}}</div></el-col>
          <el-col :span="3"><div>{{$t('sms.splitNum')}}:</div></el-col>
          <el-col :span="5"><div>{{smsDetail.splitCount}}</div></el-col>
        </el-row>
        <el-row style="margin-bottom: 10px;">
          <el-col :span="3"><div>{{$t('public.callStatus')}}:</div></el-col>
          <el-col :span="6"><div>{{smsDetail.m7StatusName}}</div></el-col>
          <el-col :span="3"><div>{{$t('sms.sendAgents')}}:</div></el-col>
          <el-col :span="4"><div>{{smsDetail.agentsData}}</div></el-col>
          <el-col :span="3"><div>{{$t('sms.smsSign')}}:</div></el-col>
          <el-col :span="5"><div>{{smsDetail.signDisplay}}</div></el-col>
        </el-row>
         <el-row v-if="smsSendingStatus === 'showAll'" style="margin-bottom: 10px;">
          <el-col :span="3"><div>{{$t('sms.chanState')}}:</div></el-col>
          <el-col :span="21"><div>{{smsDetail.by_errordescription || '--'}}</div></el-col>
        </el-row>
        <el-row v-if="smsSendingStatus === 'showAll'" style="margin-bottom: 10px;">
          <el-col :span="3"><div>{{$t('sms.receiveTime')}}:</div></el-col>
          <el-col :span="21"><div>{{smsDetail.receiveTime || '--'}}</div></el-col>
        </el-row>
        <el-row style="margin-bottom: 10px;">
          <el-col :span="3"><div>{{$t('sms.smsCont')}}:</div></el-col>
          <el-col :span="21"><div>{{smsDetail.content}}</div></el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button class="primary_btn" @click.stop="dialogSmsDetailVisible = false">{{$t('sms.close')}}</el-button>
        </div>
      </el-dialog>
      <!--点击查看  dialog 短信详情    end   ===============================================-->
    </div>
  </div>
</template>
<script>
  import affix from '../../ui-modules/affix/Affix.vue'
  import Pagination from '@/components/public-modules/card/Pagination'
  import {getCache, getFormatDateTime, checkHideTel, m7Language, deepClone} from '@/utils/m7Utils.js'
  export default {
    name: 'smsMy',
    props: {
      refresh: String
    },
    data () {
      return {
        pickerOptions2: {
          shortcuts: [{
            text: this.$t('sms.thisOneWeek'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisOneMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisThreeMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        smsSplitBaseNum: 66,
        tableLoading: false,
//        搜索条件数据初始化
        smsStatus: [],
        smsSendingStatus: '',
        smsSign: [],
        agents: [],
//        分页数据相关
        pageSize: 10,
        currentPage: 1,
//        搜索条件数据双向绑定
        ruleForm: {
          sign: '',
          date: '',
          num: '',
          m7Status: ''
        },
//        查看短信详情开关
        dialogSmsDetailVisible: false,
//        短信详情信息初始化
        smsDetail: {}
      }
    },
    methods: {
//        点击查看
      showSmsDetail (index, rows) {
        this.dialogSmsDetailVisible = true
        this.smsDetail = rows[index]
      },
//      重置搜索条件
      resetForm () {
        for (let i in this.ruleForm) {
          this.ruleForm[i] = ''
        }
      },
//      查询短信功能
      searchMySms () {
        this.currentPage = 1
        this.searchSms()
      },
//        分页查询
      handleCurrentChange (val) {
        this.currentPage = val
        this.searchSms()
      },
//      查询功能
      searchSms  () {
        this.tableLoading = true
        let data = {'pageSize': this.pageSize, 'page': this.currentPage}
        data.m7Status = this.ruleForm.m7Status
        data.sign = this.ruleForm.sign
        data.num = this.ruleForm.num
        data.smsSendingStatus = this.smsSendingStatus
        let notifyTime = this.ruleForm.date
        if (notifyTime) {
          if (notifyTime[0]) {
            data.BEGIN_TIME = getFormatDateTime(notifyTime[0])
          }
          if (notifyTime[1]) {
            data.END_TIME = getFormatDateTime(notifyTime[1])
          }
        }
        this.$store.dispatch('queryMySms', data).then(() => {
          this.tableLoading = false
        })
      },
      renderHeader (h,{column}) { // h即为cerateElement的简写，具体可看vue官方文档
         return h("div", [
          h("span", column.label + "  ", {
            align: "left"
          }),
          h(
            "el-popover",
            {
              props: {
                placement: "bottom-start",    // 一般 icon 处可添加浮层说明，浮层位置等属性
                trigger: "hover"
              },
              style:{
                color: '#459ae9',
              }
            },
            [
              h("p", column.property === 'receiveTime' ? this.$t('sms.receiveTimeTip') : this.$t('sms.locationPopover'), {
                class: "text-align: right; margin: 0"
              }),
              h("i", {                            // 生成 i 标签 ，添加icon 设置 样式，slot 必填
                class: "iconfont icon-wenzishuoming ",
                slot: "reference"
              })
            ]
          )
        ]);
      }
    },
    computed: {
//        表单数据
      tableData () {
        let data = deepClone(this.$store.state.sms.mySms.list)
        for (var i in data) {
          let agentsId = data[i].createUser
          if (agentsId === 'filterMessageSms') {
            data[i].agentsData = this.$t('sms.filterMessageSms')
          } else {
            data[i].agentsData = this.$store.getters.agents[agentsId] ? this.$store.getters.agents[agentsId].displayName : agentsId
          }
          data[i].numHide = checkHideTel(data[i].num, this.$store.state.session.user)
          data[i].m7StatusName = m7Language('globalChineseKey.' + data[i].m7StatusName, null, true) || data[i].m7StatusName
        }
        return data
      },
      count () {
        return this.$store.state.sms.mySms.count
      }
    },
    watch: {
      refresh (cur, old) {
        if (cur === 'my') {
          this.searchMySms()
        }
      }
    },
    beforeMount () {
      if (this.$store.state.session.user.type === 'admin') {
        this.smsSendingStatus = 'showAll'
      } else {
        this.smsSendingStatus = this.$store.state.session.account.smsSendingStatus
        // 计费系统-产品-云客服/云电销/ 短信设置/ 短信发送状态设置
      }
      let data = {'pageSize': 10, 'page': 1}
      data.smsSendingStatus = this.smsSendingStatus
      let p2 = this.$store.dispatch('getCache', {type: 'smsSign'})
      let p3 = this.$store.dispatch('queryMySms', data)
      Promise.all([p2, p3]).then(() => {
        this.smsSign = this.$getCache('smsSign')
        this.smsSplitBaseNum = this.$store.state.session.account.smsSplitBaseNum || 66
        this.smsStatus = deepClone(getCache('smsStatus'))
        if (this.smsSendingStatus !== 'showAll') {
          this.smsStatus = this.smsStatus.filter(item => {
            if (item.code_value !== 'deliver' && item.code_value !== 'undeliver') {
              item.code_name = m7Language('globalChineseKey.' + item.code_name, null, true) || item.code_name
              item.code_name_display = m7Language('globalChineseKey.' + item.code_name_display, null, true) || item.code_name_display
              return item
            }
          })
        }
      })
    },
    components: {
      affix,
      Pagination
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  /deep/.icon-wenzishuoming
      color #459ae9
      font-size 16px
      font-weight normal
      cursor pointer
  .smsMy
    .location
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
    .tables
      padding 16px 20px 0 20px
      .caption
        color $c-prompt
        height 48px
        line-height 48px
        padding-left 14px
        border 1px solid #ddd
        border-bottom none
        .fr
          padding-top 10px
          height 38px
    .ui-affix
      padding-bottom 0
    .submit
      text-align right
      margin 20px 0
    .part
      display inline-block
      margin-bottom 20px
      vertical-align top
    .demonstration
      margin-right 10px
      display inline-block
      min-width 88px
      text-align right
      margin-left 20px
      color $cf-gray1
    .sign-choose
    .date-choose
      width 360px
    .phone-num
    .status-choose
      width 200px
    .title
      color $cf-level2
      margin 20px 0 18px 0
      font-weight normal
      position relative
      .sign
        position relative
        width 12px
        height 12px
        background #7ccdd1
        display inline-block
        z-index 3
      .text
        position relative
        display inline-block
        padding 0 8px 0 10px
        background $cf-white
        z-index 3
      &:after
        content ""
        display inline-block
        width 100%
        left 0
        border-bottom 1px dashed $cf-level2
        position absolute
        top 12px
      
  .sms-my-sign-select-option
    max-width 360px
    height auto
    word-wrap break-word
    white-space normal
</style>
